<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>合同签名</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/pdfh5.css" />
    <meta charset="utf-8">
    <style>
        body,
        html {
            width: 100%;
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #demo {
            display: none;
            height: 80%;
        }

        #clear_btn {
            width: 30%;
            background: #ca4341;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }

        #save_btn {
            width: 30%;
            background: #4cd964;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }

        #showToastWraper {
          position: fixed;
          z-index: 999;
          top: 35%;
          right: 0;
          left: 0;
          width: 90%;
          margin: auto;
          background: rgba(0, 0, 0, 0.6);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
          text-align: center;
          padding: 10px 20px;
          color: #dcdcdc;
          border-radius: 50px;
        }

        #input_num{
            width: 85%;
            color: #333333;
            font-size: 120%;
            border: none;
            border-bottom: 1px solid #f1f1f1;
            line-height: 30px;
            margin-left: 30px;
            margin-right: 30px;
            -webkit-user-select: auto !important;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="text-wrapper">
            <div class="text part1">
            </div>
            <div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
        </div>
    </div>
    <div id="demo"></div>
    <div id="canvas-btn">
        <span style="color: #333333;font-size: 120%;margin-left: 30px;display: inline-block;line-height: 30px;">第一步：生成电子签章</span>
        <span style="color: #333333;font-size: 120%;margin-left: 30px;display: inline-block;line-height: 30px;">第二步：输入签署密码，确认签署</span>
        <input type="password"  id="input_num"/>
        <div style="display: flex; align-items: center;justify-content: center;margin: 0;">
            <div id="clear_btn" onclick="generate(0)" class="op_btn">生成签章</div>
            <div id="save_btn" onclick="signed(0)" class="save_btn">确认签署</div>
            <div class="cleaerfix"></div>
        </div>
    </div>
    <!-- pdf的js -->
    <script src="js/pdf.js"></script>
    <script src="js/pdf.worker.js"></script>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" type="text/javascript" ></script>
    <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
    <!-- 签名的js -->
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/touch.js"></script>
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/flexible_css.debug.js"></script>
    <script type="text/javascript">
        var pdfh5;
        var domain;
        var token;
        $(function () {
            $("#app").remove()
            $("#demo").show()
            domain = window.location.hostname;
            const params = new URLSearchParams(window.location.search);
            token = params.get("token");  //通过路由获取pdf文件线上地址
            console.log('https://'+domain+'/prod-api/v1/open/agreement?token='+token);
            pdfh5 = new Pdfh5('#demo', {
                //'https://feiyunphoneapp.oss-cn-shenzhen.aliyuncs.com/esign/esignfile/d4060a627c79489b85a4ca362f9870f5.pdf'
                pdfurl: 'https://'+domain+'/prod-api/v1/open/agreement?token='+token,
                // pdfurl: url,  //pdf线上地址
                // ,URIenable:true //开启浏览器地址栏file参数获取
            });
            //pdf准备开始渲染，此时可以拿到pdf总页数
            pdfh5.on("ready", function () {
                console.log("pdf准备开始渲染，总页数：" + this.totalNum)
            })
            //监听pdf渲染成功
            pdfh5.on("success", function (time) {
                time = time / 1000
                console.log("pdf渲染完成，总耗时" + time + "秒")
            })
            if(params.get("signed")==="1"){
                console.log("已经签署协议，隐藏按钮");
                $("#canvas-btn").hide();
                $("#demo").css("height","100%");
            }
        })
    </script>
    <script>
        // 弹窗提示
        function showToast(text, width, radius) {
          var widthDiv = width ? width : '50%';//自定义宽度
          var radiusDiv = radius ? radius : '50px';//自定义边框角度
          //此处你还可以定义 位置、文字颜色大小、背景色、显示时长等等
    
          var showToastDiv = "<div id='showToastWraper'></div>";
          var showToastWraper = $("#showToastWraper");
          var isExat = showToastWraper.length;
    
          if (!isExat) {
            //第一次创建元素 并且设置元素把显示状态的停止掉、渐隐显示、显示文本内容、设置自定义样式、1.5s后渐隐消失
            $(document.body).append(showToastDiv);
            $("#showToastWraper").stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
          } else {
            //第二次 就不需要创建元素了减少dom操作
            showToastWraper.stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
          }
        }

        function generate(){
            $.ajax({
                type: "POST",
                url: 'https://'+domain+"/prod-api/v1/sign/cert",
                beforeSend: function(request) {
                    request.setRequestHeader('Authorization', 'Bearer '+token);
                },
                success: function(result) {
                    window.location.reload();
                }
            });
        }

        function signed(){
            var inp_pwd = $("#input_num").val();
            if(!inp_pwd) {
                showToast("请输入签署密码");
            } else {
                $.ajax({
                    type: "POST",
                    url: 'https://'+domain+"/prod-api/v1/sign/agreement",
                    beforeSend: function(request) {
                        request.setRequestHeader('Authorization', 'Bearer '+token);
                    },
                    data: {certPassword: inp_pwd},
                    success: function(result) {
                        wx.miniProgram.navigateBack({
                            url: "/packageB/pages/applyAttendant"
                        });
                    }
                });
            }
            return;
        }


    </script>
</body>

</html>